<template>
  <lay-dropdown updateAtScroll :placement="placement" :trigger="trigger">
    <a class="ant-dropdown-link" @click.prevent>
      <slot></slot>
    </a>
    <template #content>
      <lay-dropdown-menu>
        <template v-for="(item, index) in list" :key="index">
          <lay-line v-if="item.isLine" margin="5px" theme="#EEE"></lay-line>
          <lay-dropdown-menu-item v-else :disabled="item.disabled" @click="$emit('itemClick',item)">
            <div v-if="item.color" :style="{ backgroundColor: item.color }" class="color"></div>
            <svg-icon v-else-if="item.icon" :icon-name="item.icon"></svg-icon>
            {{ item.label }}
          </lay-dropdown-menu-item>
        </template>
      </lay-dropdown-menu>
    </template>
  </lay-dropdown>
</template>
<script>
import { themeList } from '@/common/js/theme'
export default {
  props: {
    placement: {
      type: String,
      default:'bottom'
    },
    trigger: {
      type: Array,
      default() {
        return ['hover']
      }
    },
    list: {
      type: Array,
      default() {
        return []
        /*
          [
            {
              isLine: boolean, 是不是一条线
              disabled: boolean, 禁用状态
              color: string, 主题颜色
              icon,
              label
            }
          ]
        */
      }
    }
  },
  emits:['click'],
  setup(props, context) {
    const changTheme = item => {
      context.emit('click', item)
    }
    return {
      themeList,
      changTheme
    }
  }
}
</script>
<style lang="scss" scoped>
.color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}
.ant-dropdown-link {
  display: flex;
  align-items: center;
}
</style>
